/**
 * Created by Dalyn on 2017/3/17.
 * 企业-充值支出记录
 */
import React from "react";
import {hashHistory} from 'react-router';
import Relay from "react-relay";
import {Table,Icon} from 'antd';
import Pagination from "./Pagination"
import GetEnAccountRecordListMutation from "./mutation/GetEnAccountRecordListMutation"
import Confirm from "../../common/Confirm"
import "./css/rechargeRecordCompany.css";
import "./css/account_common.css";
import Util from "../../util/Util";
import ReactKey from "../../util/ReactKey";
import { Button, Modal } from "fly";
import Config from "../../util/Config"

/*导出组件*/
export default class RechargeRecordCompany extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            listInfo: [],
            /*当前企业id*/
            enid: sessionStorage.getItem('enterpriseId'),
            /*总共多少条*/
            totalResult: "",
            /*每页条数*/
            pageItem: "",
            /*指定页码*/
            pageNum: 1,
            /*指定每页显示条数*/
            pageSize: 10,
            /**/
            cashMoney: "",
            /*后台错误提示*/
            hint: "",
            loading: true,
            visible: false,
            showModalAccount: 0,
            remitFileJson: []
        };
        this.style = {
            confirm: {
                width: '90px',
                height: '30px',
                backgroundColor: "#36b3b3",
                fontSize: "14px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius: "2px",
                // marginTop: "6px",
                marginLeft: "30px",
            },
            conPage:{
                fontSize: "12px",
                color: "#999",
                fontFamily: "Microsoft YaHei",
                border:"1px solid #ededed",
                borderRadius: "2px",
                marginLeft: "10px",
                width: '40px',
                height: '22px',
                backgroundColor: "white",
            }
        };
        this.url = Config.qiuniu;
        this.download = this.download.bind(this);
    }

    componentWillMount() {
        this.myRelay();
    }
    myRelay() {
        Relay.Store.commitUpdate(
            new GetEnAccountRecordListMutation({
                enid: this.state.enid,
                pageNum: this.state.pageNum,
                pageSize: this.state.pageSize,
            }),
            {
                onFailure: () => {
                    message.error("请求失败")
                },
                onSuccess: (response) => {
                    let data = response.getEnAccountRecordList.data;
                    if (data.errorCode === "0") {
                        this.setState({
                            listInfo: data.enAccountRecordList,
                            cashMoney: data.cashMoney,
                            totalResult: data.totalResult,
                            pageItem: data.enAccountRecordList.length
                        },()=>{
                            this.setState({ loading: false });
                        });
                    } else {
                        message.error(data.value)
                        this.setState({
                            hint: data.value
                        })
                    }
                }
            }
        );
    }

    /*充值跳转*/
    rechargeCompany() {
        hashHistory.push("/rechargeOrder")
    }
    /*页码*/
    onSure(size,num){
        this.setState({
            pageSize: size,
            pageNum: num,
            loading:true,
        }, this.myRelay)
    }

    review(record) {
      record.applyStatus == 1 ? (
        this.setState({
          visible: true,
          showModalAccount: record.applyAmount,
          remitFileJson: JSON.parse(record.remitFileJson),
        })
      ) : (
        this.setState({
          visible: true,
          showModalAccount: record.amount,
          remitFileJson: JSON.parse(record.remitFileJson),
        })
      )
    }
    handleOk = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
    handleCancel = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }

    download() {
      let remitFileJson = this.state.remitFileJson
      const h = this.url + remitFileJson[0].response.key + `?attname=`+ remitFileJson[0].name, a = document.createElement("a");
      a.href = h;
      a.setAttribute("download","");
      a.click();
    }
    render() {
        const columns = [
            {
                title: '日期',
                dataIndex: 'date',
                key: 'date',
                render: (text, record) =>{
                    return(
                        <span>{Util.dateFormat(record.createTime)}</span>
                    )
                }
            },{
                title: '充值金额（元）',
                dataIndex: 'amount',
                key: 'amount',
                render: (text, record) =>{
                    return(
                        <span>{record.applyStatus == 1 ? Util.doubleFormat(record.applyAmount) : Util.doubleFormat(record.amount)}</span>
                    )
                }
            },
            {
                title: '状态',
                dataIndex: 'applyStatus',
                key: 'applyStatus',
                render: (text, record) =>{
                    return(
                        <span>{record.applyStatus == 1 ? '待充值' : '已充值' }</span>
                    )
                }
            },{
                title: '操作',
                dataIndex: 'a',
                key: 'a',
                render: (text, record) =>{
                  return (<a onClick={this.review.bind(this, record)} style={{color:'#36b3b3'}}>查看</a>)
                }
            }
        ];
        const listInfo = (null == this.state.listInfo || this.state.listInfo.length == 0) ? [] : this.state.listInfo;
        return (
            <div className="recharge_recCom">
                <div className="recharge_recCom_box">
                    <div className="recharge_recCom_th0">
                        <span className="recharge_recCom_tab">账户余额：</span>
                        <span className="recharge_recCom_tab recharge_recCom_tab_red">{Util.doubleFormat(this.state.cashMoney)}</span>
                        <span className="recharge_recCom_tab">元</span>
                        <div className="recharge_recCom_tab_btn">
                             <Button style={this.style.confirm} onClick={this.rechargeCompany.bind(this)}>充值</Button>
                        </div>
                    </div>
                    <Table
                        columns={columns}
                        dataSource={listInfo}
                        pagination={false}
                        rowKey={record =>record.accountRecordId}
                        style={{width:'100%'}}
                        className="order_table"
                        loading={this.state.loading}
                        // bordered
                    />
                    <Modal
                      title="查看"
                      visible={this.state.visible}
                      onOk={this.handleOk}
                      onCancel={this.handleCancel}
                      wrapClassName="rechargeCompany"
                      okText='确定'
                      cancelText=''
                    >
                      <p>充值金额： {Util.doubleFormat(this.state.showModalAccount)}</p><br/>
                      <p>
                        {
                            this.state.remitFileJson ? (
                                this.state.remitFileJson.map((v,i)=>{
                                    return (<span className="settlementView_for">
                                      <a>{v.name}</a>
                                      {
                                        v.response ? (<a onClick={this.download}>下载</a>) : null
                                      }
                                    </span>)
                                })
                            ) : null
                        }
                      </p>
                    </Modal>
                    <Pagination eachSize={this.state.pageSize} dataSize={this.state.totalResult} onSure={this.onSure.bind(this)} ref={'pagination'}/>
                </div>
            </div>
        )
    }
}
